<template>
	<view :style="{ paddingTop: safeAreaTop + 'px' }">
		<view class="login" v-if="!showKeyboard">
			<!-- 微信登录 -->
			<view class="weixin" v-if="loginMode===1">
				<view class="iconfont logo">&#xe766;</view>
				<view class="swiper mt-1">
					<up-swiper :list="swiperList" indicator indicatorMode="dot" indicatorActiveColor="#FF9281" circular
						height="500px" @change="swiperChange" @click="clickSwiper"></up-swiper>
				</view>
				<div class="btn flex-r s-b">
					<button class="button-active">微信登录</button>
					<button class="other-btn" @click="loginMode = 2">其他方式</button>
				</div>
			</view>
			<!-- 验证码登录 -->
			<view class="yanzhengma" v-if="loginMode===2">
				<view class="title">
					验证码登录
				</view>
				<view class="phone flex-r a-c mt-3">
					<select class="select">
						<option value="+86" checked>+86</option>
					</select>
					|
					<up-input placeholder="请输入手机号码" border="surround" v-model="phoneNumber"></up-input>
				</view>
				<button :class="{'_button':true,'_button2':false}" @click="getVerificationCode">
					获取验证码
				</button>
				<view class="password-btn flex-r a-c j-c mt-2">
					<text>密码登录</text>
				</view>
			</view>
			<!-- 协议 -->
			<view class="agreement flex-r mt-2">
				<up-radio-group v-model="agreement">
					<up-radio activeColor="#FF9281" :name="1" label="" @change="radioChange" />
				</up-radio-group>
				<view>
					我已详细阅读并同意
					<text>《识知有谓软件许可及用户协议》《识知有谓隐私协议》</text>
				</view>
			</view>

			<!-- 其他方式 -->
			<view class="other-ways" v-if="loginMode ===2">
				<up-divider text="其他方式登录"></up-divider>
				<view class="flex-r j-c mt-2">
					微信 苹果
				</view>
			</view>
		</view>
		<view class="login keyboard" v-else>
			<view class="yanzhengma">
				<view class="title">
					验证码登录
				</view>
				<view class="tips flex-r a-c mt-2">
					<text>验证码已经发送至 +86 18608004596</text>
					<view v-if="counting">
						重新获取({{countdown}}s)
					</view>
					<view class="regain" v-else>
						重新获取
					</view>
				</view>
				<view class="code flex-r s-b a-c">
					<view></view>
					<view></view>
					<view></view>
					<view></view>
				</view>
			</view>
			<up-keyboard ref="uKeyboard" mode="number" :overlay="false" :showTips="false" :dotDisabled="true"
				:show="showKeyboard"></up-keyboard>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		computed
	} from 'vue'
	const safeAreaTop = uni.$safeArea?.safeAreaTop || 44;
	const swiperList = reactive([
		'https://cdn.uviewui.com/uview/swiper/swiper3.png',
		'https://cdn.uviewui.com/uview/swiper/swiper2.png',
		'https://cdn.uviewui.com/uview/swiper/swiper1.png',
	]);
	const swiperChange = () => {}
	const clickSwiper = () => {}

	// 协议
	const agreement = ref(0)
	const radioChange = (val) => {
		console.log(val);
	}

	// 登录方式
	const loginMode = ref(1)
	// 微信登录

	// 验证码登录
	const phoneNumber = ref(null)

	let count = ref(60)
	let counting = ref(false)
	const countdown = computed(() => {
		let timer = setInterval(() => {
			count.value--
			if (count.value <= 0) {
				clearInterval(timer)
				count.value = 60
				counting.value = false
			}
		}, 1000)
		return count
	})
	const showKeyboard = ref(false)
	const getVerificationCode = () => {
		showKeyboard.value = true
		counting.value = true
	}
</script>

<style lang="scss" scoped>
	.login {
		padding: 20rpx 60rpx;

		.logo {
			font-size: 60rpx;
		}

		.btn {
			margin-top: 100rpx;

			button {
				width: 290rpx;
				height: 100rpx;
			}

			.button-active {
				font-size: 36rpx;
				border-radius: 50rpx;
			}

			.other-btn {
				font-weight: 500;
				font-size: 36rpx;
				color: #000000;
				background: #FFFFFF;
				border-radius: 50rpx;
				border: 1px solid #000000;
			}
		}

		.agreement {
			font-size: 22rpx;
			color: #393939;

			text {
				font-size: 22rpx;
				color: #003BD6;
				line-height: 32rpx;
			}
		}

		.yanzhengma {
			margin-bottom: 120rpx;

			.title {
				font-weight: 500;
				font-size: 52rpx;
				color: #000000;
			}

			.phone {
				width: 100%;
				height: 100rpx;
				color: #DEDEDF;
				background: #F9F9F9;
				border-radius: 20rpx;
				padding: 0 20rpx;
				box-sizing: border-box;

				.select {
					border: none;
					background-color: transparent;
				}

				::v-deep .u-border {
					border: none;
				}
			}

			._button {
				width: 100%;
				height: 100rpx;
				line-height: 100rpx;
				font-weight: 500;
				font-size: 36rpx;
				text-align: center;
				color: #BDBDBD;
				background: #EEEEEE;
				border-radius: 50rpx;
				margin-top: 40rpx;
			}

			._button2 {
				color: #FFFFFF;
				background: #FF9281;
			}

			.password-btn {
				font-size: 32rpx;
			}
		}

		.other-ways {
			position: absolute;
			bottom: 100rpx;
			left: 0;
			width: 100%;
			padding: 0 60rpx;
			box-sizing: border-box;
		}

	}

	.keyboard .yanzhengma {
		.tips {
			text {
				font-size: 24rpx;
				color: #797979;
			}

			view {
				line-height: 34rpx;
				font-size: 24rpx;
				color: #797979;
				background: #EEEEEE;
				border-radius: 24rpx;
				padding: 4rpx 16rpx;
				margin-left: 10rpx;
			}

			.regain {
				color: #FFFFFF;
				background: #FF9281;
			}
		}

		.code {
			margin-top: 100rpx;

			view {
				width: 100rpx;
				height: 100rpx;
				background: #F9F9F9;
				border-radius: 20rpx;
			}
		}
	}
</style>